<!-- Conditional formatting start -->
<section id="formate">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Conditional formatting</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body card-dashboard ">
                        <p>This demo shows how to use the cell type renderer feature to make some conditional formatting:</p>
                        <ol>
                            <li>First row is read-only, and formatted in green bold text</li>
                            <li>All cells in the Nissan column are written in italic</li>
                            <li>Empty cells have silver background</li>
                            <li>Negative numbers are written in red</li>
                        </ol>
                        <div class="table-responsive">
                            <div id="formatting" class="hot handsontable htRowHeaders htColumnHeaders"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Conditional formatting end -->

<!-- Customizing borders start -->
<section id="border">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Customizing borders</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body card-dashboard ">
                        <p>To enable the custom borders feature, set the customBorders option. It could be set as true or initialized as an array with predefined setup.</p>
                        <p>To initialize Handson table with predefined custom borders, provide cells coordinates and border styles in form of an array:</p>
                        <p>with row/col pairs: {row: 2, col: 2, left: { /*...*/ }} or with range details: {range: {from: {row: 1, col: 1}, to:{row: 3, col: 4}}, left: { /*...*/ }}</p>
                        <div class="table-responsive scroll-container">
                            <div id="borders" class="hot handsontable htRowHeaders htColumnHeaders"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Customizing borders end -->

<!-- Highlighting selection start -->
<section id="highlight-selection">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Highlighting selection</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body card-dashboard ">
                        <p>Use options currentRowClassName and currentColumnClassName</p>
                        <div class="table-responsive">
                            <div id="highlighting" class="hot handsontable htRowHeaders htColumnHeaders"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Highlighting selection end -->

<!-- Mobiles and tablets start -->
<section id="mobiles-tablets">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Mobiles and tablets</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body card-dashboard ">
                        <p>Currently Handson table supports only iPad 4 in a basic scope. Mobile editor and selecting modes are enabled automatically if you're viewing Handson table on a mobile device.</p>
                        <p>Open this page on iPad 4 and play with the demo below:</p>
                        <div class="table-responsive scroll-container">
                            <div id="mobilesTablets" class="hot handsontable htRowHeaders htColumnHeaders"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Mobiles and tablets end -->